<script setup lang="ts">
import { ref, watch } from 'vue'
import { userAvatars } from '../userAvatar'

const props = defineProps<{
    open: boolean
    avatar: string
}>()

const emit = defineEmits<{
    (e: 'closeProcessor'): void
    (e: 'confirmProcessor', avatar: string): void
}>()

const open = ref<boolean>(props.open)
watch(
    () => props.open,
    (isOpen) => {
        open.value = isOpen
    },
    { immediate: true }
)
const oldAvatarSelected = ref<string>('1')
const avatarSelected = ref<string>('1')
watch(
    () => props.avatar,
    (avatar) => {
        // console.log('🌈 —— avatar --->', avatar)
        avatarSelected.value = avatar
    },
    { immediate: true }
)
watch(
    () => props.avatar,
    (avatar) => {
        // console.log('🌈 —— once --->', avatar)
        oldAvatarSelected.value = avatar
    },
    { once: true }
)
// 切换头像
const changeUserAvatar = (avatar: string) => {
    // console.log('🌈 —— data-avatar --->', avatar)
    // 赋新值
    avatarSelected.value = avatar
}

const beforeClose = () => {
    console.log('close')
    emit('closeProcessor')
    avatarSelected.value = oldAvatarSelected.value
}
</script>

<template>
    <ElDialog
        v-model="open"
        title="选择头像"
        width="500"
        class="avatar-dialog-component"
        :before-close="beforeClose"
    >
        <div class="one-container">
            <div
                class="one-container-list"
                :class="[
                    avatarSelected === item.key
                        ? 'one-container-list-active'
                        : ''
                ]"
                v-for="item in userAvatars"
                :key="item.key"
                @click="changeUserAvatar(item.key)"
            >
                <img
                    class="one-container-item"
                    :src="item.value"
                    alt="xfxj"
                />
            </div>
        </div>
        <template #footer>
            <div
                class="footer-container"
                @click.stop="emit('confirmProcessor', avatarSelected)"
            >
                确定
            </div>
        </template>
    </ElDialog>
</template>

<style scoped lang="scss">
.avatar-dialog-component {
    .one-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;

        .one-container-list {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;

            .one-container-item {
                width: 95px;
                height: 95px;
                border-radius: 5px;
                object-fit: cover;
                cursor: pointer;
                transition: transform 0.3s;

                &:hover {
                    transform: scale(1.1);
                }
            }
        }

        .one-container-list-active {
            border: 3px solid var(--primary);
            // background-color: var(--primary);
        }
    }

    .footer-container {
        width: 100%;
        height: 30px;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        outline: none;
        border-color: rgb(50.8, 116.6, 184.5);
        background-color: rgb(50.8, 116.6, 184.5);
        color: #fff;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
            background-color: #409eff;
            border-color: #409eff;
        }
    }
}
</style>
